<template>
  <div class="footer">
    {{ total }}
    <button @click="clearAll">清除全部TODO</button>
  </div>
</template>

<script>
export default {
  name: 'todoFooter',
  data() {
    return {
      total: 0,
    };
  },
  mounted() {
    this.$bus.$on('getTotal', this.getTotal);
  },
  methods: {
    // 获取 todos total
    getTotal(total) {
      this.total = total;
    },
    clearAll() {
      // 不传参
      this.$bus.$emit('clearAll');
    },
  },
};
</script>

<style scoped>
.footer {
  color: #333;
}
</style>